<template>
  <a-card :bordered="false">
    <template v-if="error.notDesignForm">
      <h1 style="text-align: center">你还没有设计任何表单项，不能查看表单数据！</h1>
    </template>

    <template v-else>
      <!-- 操作按钮区域 -->
      <div class="table-operator" style="margin-bottom: 18px;">
        <!-- 查询页面暂时屏蔽操作
        <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
        -->
        <span style="color:#060606">请选择工单： </span>
        <a-select
          class="search-input"
          showSearch
          :showArrow="false"
          placeholder="搜索表单"
          optionFilterProp="children"
          :filterOption="filterOption"
          @change="desFormChange"
          v-model="desFormValue">
          <a-select-option v-for="(site,index) in desFormOptions" :key="index" :value="site.value">{{site.text}}</a-select-option>
        </a-select>
        <!-- 高级查询 -->
        <j-super-query style="margin-left: 10px;" ref="supQuery" :fieldList="squeryFieldList" :saveCode="superQuerySaveCode" :loading="loading" @handleSuperQuery="handleSuperQuery"/>

        <!-- 批量操作 -->
        <!-- 查询页面暂时屏蔽操作
        <a-dropdown v-if="selectedRowKeys.length > 0">
          <a-menu slot="overlay">
            <a-menu-item key="1" @click="handleDeleteBatch">
              <a-icon type="delete"/>
              <span>删除</span>
            </a-menu-item>
          </a-menu>
          <a-button style="margin-left: 8px">
            <span>批量操作</span>
            <a-icon type="down"/>
          </a-button>
        </a-dropdown>
        -->

      </div>

      <!-- table区域-begin -->
      <div>

        <a-alert type="info" showIcon style="margin-bottom: 16px;">

          <a-row slot="message">
            <a-col :span="12">
              <span>已选择</span>
              <a style="font-weight: 600;padding: 0 4px;">{{ selectedRowKeys.length }}</a>
              <span>项</span>
              <a style="margin-left: 12px" @click="selectedRowKeys=[]">清空</a>
            </a-col>
            <a-col :span="12" style="text-align: right">
              <a @click="handleClickReload">
                <a-icon type="sync"/>
                <span style="margin-left:4px;">刷新</span>
              </a>
              <a-divider type="vertical"/>
              <a-popover title="自定义列" trigger="click" placement="leftBottom">
                <a-checkbox-group slot="content" :value="selectedColumnKeys" @change="handleCustomColumnChange">
                  <a-row style="width: 700px;">
                    <a-col :span="24/3">
                      <a-checkbox value="$selection$">选择列</a-checkbox>
                    </a-col>
                    <a-col :span="24/3">
                      <a-checkbox value="$rowNumber$">行号列</a-checkbox>
                    </a-col>
                    <a-col :span="24/3">
                      <a-checkbox value="$action$">操作列</a-checkbox>
                    </a-col>
                    <a-col :span="24/3" v-for="column in allColumns" :key="column.dataIndex">
                      <a-checkbox :value="column.dataIndex">{{ column.title }}</a-checkbox>
                    </a-col>
                  </a-row>
                </a-checkbox-group>
                <a>
                  <a-icon type="setting"/>
                  <span style="margin-left:4px;">自定义列</span>
                </a>
              </a-popover>
            </a-col>
          </a-row>

        </a-alert>

        <a-table
          ref="table"
          size="middle"
          bordered
          rowKey="id"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="ipagination"
          :loading="loading"
          :scroll="tableScroll"
          :rowSelection="rowSelection"
          @change="handleTableChange">

          <template slot="action" slot-scope="text, record">
            <a @click="handleView(record)">查看</a>

            <!--  查询页面暂时屏蔽操作
            <a-divider type="vertical"/>
            <a @click="handleEdit(record)">编辑</a>
            <a-divider type="vertical"/>
            <a @click="handleGetEditUrl(record)">获取编辑地址</a>
            <a-divider type="vertical"/>
            <a-dropdown>
              <a class="ant-dropdown-link">更多
                <a-icon type="down"/>
              </a>
              <a-menu slot="overlay">
                <a-menu-item>
                  <a-popconfirm placement="topLeft" title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                    <a>删除</a>
                  </a-popconfirm>
                </a-menu-item>
              </a-menu>
            </a-dropdown>
            -->
          </template>

        </a-table>
      </div>
      <!-- table区域-end -->

      <!-- 表单区域 -->
      <auto-desform-data-modal ref="desformModal" :dialogOptions="dialogOptions" @close="handleClose"/>
    </template>

  </a-card>
</template>

<script>
import { filterObj } from '@/utils/util'
import { getAction, deleteAction } from '@/api/manage'
import JSuperQuery from '@/components/jeecg/JSuperQuery'
import AutoDesformDataModal from './modules/AutoDesformDataModal'
import { initDictOptions } from '@/components/dict/JDictSelectUtil'
import { recursiveAllWidget } from '../util/desformUtil'

export default {
  name: 'AutoDesignDataQuery',
  components: { AutoDesformDataModal, JSuperQuery },
  data() {
    return {
      loading: false,
      pageLoading: true,
      // 固定columns
      fixedColumns: {
        rowIndex: {
          title: '#',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          fixed: 'left',
          customRender: (t, r, i) => ++i
        },
        action: {
          title: '操作',
          key: 'action',
          width: 180,
          align: 'center',
          fixed: 'right',
          scopedSlots: { customRender: 'action' }
        }
      },
      fixedColumnKeys: ['$selection$', '$rowNumber$', '$action$'],
      tableColumnWidth: 200,
      tableScroll: { x: false },

      // 所有可展示出来的表头
      allColumns: [],
      selectedColumnKeys: [],
      // 表头
      columns: [],
      /* 数据源 */
      dataSource: [],
      // 是否显示选择列
      showRowSelection: true,
      /* 分页参数 */
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      // 地址栏的code
      addressCode: null,
      desformCode: null,
      selectedRowKeys: [],
      dialogOptions: { top: 60, width: 1000, padding: { top: 25, right: 25, bottom: 30, left: 25 }},
      // 高级查询构造器
      squeryFieldList: [],
      // 高级查询条件生效状态
      superQueryFlag: false,
      // 高级查询条件
      superQueryParams: '',
      // 高级查询链接条件
      superQueryMatchType: '',
      superQuerySaveCode: this.desformCode,
      // 请求参数
      url: {
        queryById: '/desform/queryById',
        list: '/desform/data/list',
        queryByCode: '/desform/queryByCode',
        delete: '/desform/data/delete',
        deleteBatch: '/desform/data/deleteBatch'
      },
      error: {
        notDesignForm: false
      },
      desFormOptions: [],
      desFormValue: ''
    }
  },
  computed: {
    rowSelection() {
      return this.showRowSelection ? {
        selectedRowKeys: this.selectedRowKeys,
        onChange: (rowKeys) => this.selectedRowKeys = rowKeys
      } : null
    }
  },
  watch: {
    '$route'(val) {
      // 刷新参数放到这里去触发，就可以刷新相同界面了
      if (val.path.indexOf('/online/desform/list/') === 0) {
        // console.log('/online/desform/list/ 是当前页面，更新路由')
        this.reload()
      }
    }
  },
  created() {
    this.initDictConfig()
  },
  mounted() {
    this.reload()
  },

  methods: {
    initDictConfig() {
      // 初始化字典 - 表单数据
      initDictOptions('design_form,desform_name,desform_code').then((res) => {
        if (res.success) {
          this.desFormOptions = res.result
          const code = this.desFormOptions[0].value
          this.desFormValue = code
          this.reload(code)
        }
      })
    },
    reload(val) {
      // 初始化
      this.pageLoading = true
      this.columns = []
      this.dataSource = []
      this.selectedRowKeys = []
      this.ipagination.current = 1
      this.superQueryParams = ''
      this.superQueryFlag = false
      // 加载新数据
      const code = val// this.$route.params.code
      this.desformCode = null
      this.addressCode = code
      if (this.addressCode) {
        this.loadColumnsInfo(code)
      } else {
        this.pageLoading = false
      }
    },

    loadColumnsInfo(code) {
      this.loading = true
      return getAction(this.url.queryByCode, {
        desformCode: code
      }).then(res => {
        if (res.success) {
          const { result } = res
          this.desformCode = result.desformCode
          // 判断是否是子表
          if (result.desformType === 2) {
            this.desformCode = result.parentCode
            return this.loadColumnsInfo(result.parentCode)
          }
          const designJson = result.desformDesignJson
          if (designJson == null) {
            this.pageLoading = false
            this.error.notDesignForm = true
            return
          }
          const json = JSON.parse(designJson)
          // 保存 dialogConfig
          const dialogOptions = json.config.dialogOptions
          if (dialogOptions) {
            this.dialogOptions = dialogOptions
          }

          const allColumns = []
          const selectedColumnKeys = []
          // 高级查询条件
          const superQuery = []

          /** 封装column，同时封装高级查询条件 */
          const packageColumn = (item) => {
            // 忽略部分显示
            const ignores = ['button', 'buttons', 'grid', 'card', 'tabs', 'text', 'sub-table-design', 'divider']
            if (ignores.indexOf(item.type) === -1) {
              const name = (item.name.trim()) || item.model
              const column = {
                title: name,
                align: 'center',
                dataIndex: item.model
              }
              // 判断是否为 select 就自定义输出内容（可输出字典
              if (item.type === 'select' && item.options.showLabel) {
                column.customRender = (text, record, index) => {
                  for (const option of item.options.options) {
                    if ((option.value || '').toString() === (text || '').toString()) {
                      return option.label
                    }
                  }
                  return text
                }
              }

              // column 只显示五个
              if (selectedColumnKeys.length < 5) {
                selectedColumnKeys.push(column.dataIndex)
              }
              allColumns.push(column)

              superQuery.push({
                type: item.type,
                value: item.model,
                text: name,
                dictCode: item.options.dictCode,
                dictTable: item.options.dictTable,
                customReturnField: item.options.customReturnField
              })
            }
          }

          recursiveAllWidget(json.list, (item, parent) => {
            if (parent && parent.type === 'sub-table-design') {
              // do nothing
            } else {
              packageColumn(item)
            }
          })
          this.allColumns = allColumns
          this.squeryFieldList = superQuery

          if (this.selectedColumnKeys.length <= 0) {
            this.selectedColumnKeys = [...this.fixedColumnKeys, ...selectedColumnKeys]
          }
          this.handleCustomColumnChange(this.selectedColumnKeys)

          return this.loadData(this.desformCode)
        } else {
          this.$error({ title: '查询失败', content: res.message })
        }
      }).finally(() => {
        this.loading = false
        this.pageLoading = false
      })
    },

    loadDataThis() {
      this.loadData(this.desformCode)
    },

    loadData(desformCode) {
      const params = {
        desformCode,
        superQuery: this.getQueryParams(),
        pageNo: this.ipagination.current,
        pageSize: this.ipagination.pageSize
      }
      this.loading = true
      return getAction(this.url.list, params).then((res) => {
        if (res.success) {
          this.dataSource = res.result.records.map(item => {
            return {
              id: item.id,
              ...JSON.parse(item.desformDataJson)
            }
          })
          this.ipagination.total = res.result.total
          if (res.message !== '查询成功') {
            this.$message.warn(res.message)
          }
        } else {
          this.$error({ title: '查询失败', content: res.message })
        }
      }).finally(() => {
        this.loading = false
        this.pageLoading = false
      })
    },

    handleAdd() {
      if (this.addressCode) {
        this.$refs.desformModal.open('add', this.addressCode, null, '新增数据')
      } else {
        this.$message.warn('请选择类型!')
      }
    },

    handleView(record) {
      this.$refs.desformModal.open('detail', this.addressCode, record.id, '查看数据')
    },
    handleEdit(record) {
      this.$refs.desformModal.open('edit', this.addressCode, record.id, '编辑数据')
    },
    handleGetEditUrl(record) {
      const url = `/online/desform/view/${this.addressCode}?did=${record.id}`
      this.$info({
        width: 800,
        title: '编辑地址',
        content: url,
        okText: '确定',
        maskClosable: true
      })
    },

    handleClose() {
      this.loadDataThis()
    },

    handleDelete(id) {
      this.doDelete(this.url.delete, { id })
    },

    handleDeleteBatch() {
      if (this.selectedRowKeys.length === 0) {
        this.$message.warning('没有选中任何记录')
        return
      }
      const ids = this.selectedRowKeys.join(',')
      this.$confirm({
        title: '确认删除',
        content: '是否删除选中的数据？',
        onOk: () => {
          this.doDelete(this.url.deleteBatch, { ids })
        }
      })
    },

    doDelete(url, data) {
      return deleteAction(url, data).then((res) => {
        if (res.success) {
          this.$message.success(res.message)
          this.loadDataThis()
          this.selectedRowKeys = []
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    // 分页时触发
    handleTableChange(pagination) {
      this.ipagination = pagination
      this.loadDataThis()
    },
    // 高级查询
    handleSuperQuery(params, matchType) {
      if (!this.desformCode) {
        return
      }
      if (!params || params.length === 0) {
        this.superQueryParams = ''
        this.superQueryFlag = false
      } else {
        this.superQueryFlag = true
        this.superQueryParams = JSON.stringify(params)
      }
      this.superQueryMatchType = matchType
      this.ipagination.current = 1
      this.loadDataThis()
    },
    // 获取高级查询条件
    getQueryParams() {
      const sqp = {}
      if (this.superQueryParams) {
        sqp['superQueryParams'] = encodeURI(this.superQueryParams)
      }
      const params = Object.assign(sqp, this.queryParam, this.isorter, this.filters)

      params.field = 'id'
      this.columns.forEach(function(column) {
        if (column.dataIndex) params.field += ',' + column.dataIndex
      })

      params.matchType = this.superQueryMatchType

      return filterObj(params)
    },

    getColumnSettingKey() {
      return this.desformCode + '$ColumnSetting'
    },
    getColumnSetting() {
      const key = this.getColumnSettingKey()
      return this.$ls.get(key) || []
    },
    setColumnSetting(selectedKeys) {
      const key = this.getColumnSettingKey()
      this.$ls.set(key, selectedKeys, 7 * 24 * 60 * 60 * 1000)
    },

    handleClickReload() {
      if (this.desformCode) {
        this.loadDataThis()
      } else {
        this.$message.warn('请选择类型!')
      }
    },

    handleCustomColumnChange(checkedValues) {
      // 去掉特殊列
      const fixed = checkedValues.filter(v => this.fixedColumnKeys.includes(v))
      const selected = checkedValues.filter(v => !this.fixedColumnKeys.includes(v))

      if (selected.length <= 0) {
        this.$message.warn('请至少留一项非特殊字段的列')
        return
      }
      this.setColumnSetting(checkedValues)
      this.selectedColumnKeys = checkedValues

      // 删选普通字段
      const columns = this.allColumns.filter(item => item.ignore ? false : selected.includes(item.dataIndex))

      if (fixed.includes('$rowNumber$')) {
        this.columns = [Object.assign({}, this.fixedColumns.rowIndex)].concat(columns)
      } else {
        this.columns = columns
      }
      if (fixed.includes('$action$')) {
        this.columns.push(Object.assign({}, this.fixedColumns.action))
      }
      this.tableScroll.x = this.columns.length * this.tableColumnWidth
      // 处理特殊字段
      this.showRowSelection = fixed.includes('$selection$')
    },
    desFormChange(val) {
      this.desformCode = val
      if (this.desformCode) {
        this.selectedColumnKeys = this.getColumnSetting()
        this.$refs.supQuery.handleReset()
      }
      this.reload(val)
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    }
  }
}
</script>
<style lang="less" scoped>
  .table-operator .search-input {
    width: 180px;
  }

</style>
<style scoped>
  @import '~@assets/less/common.less';
</style>
